<template>
  <!-- 添加或修改参数配置对话框 -->
  <el-dialog
    title="新建"
    :visible.sync="show"
    width="500px"
    @close="onCancel"
     :close-on-click-modal="false"
    append-to-body
  >
    <el-form ref="form" :model="formData" :rules="rules" label-width="120px">
      <el-form-item label="音色名称：" prop="voiceType" required>
        <el-select v-model="formData.voiceType" filterable placeholder="请选择" clearable>
          <el-option
            v-for="item in voiceTypeList"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="语速：" prop="speedRatio" required>
        <el-input
          v-model="formData.speedRatio"
          style="min-width: 230px"
          placeholder="只能输入数字，小数点保留一位即可"
          clearable
          @input="handleInput($event, 'speedRatio')"
        />
      </el-form-item>
      <el-form-item label="音量：" prop="volumeRatio" required>
        <el-input
          v-model="formData.volumeRatio"
          placeholder="只能输入数字，小数点保留一位即可"
          @input="handleInput($event, 'volumeRatio')"
        ></el-input>
      </el-form-item>
      <el-form-item label="音高：" prop="pitchRatio" required>
        <el-input
          v-model="formData.pitchRatio"
          style="min-width: 230px"
          placeholder="只能输入数字，小数点保留一位即可"
          clearable
          @input="handleInput($event, 'pitchRatio')"
        />
      </el-form-item>
      <el-form-item label="录音名称：" prop="content" required>
        <el-input
          v-model="formData.content"
          placeholder="请输入录音名称"
          clearable
          maxlength="100"
          type="textarea"
        />
      </el-form-item>
      <el-form-item label="测试文本：" prop="chatText" required>
        <el-input
          v-model="formData.chatText"
          placeholder="请输入你的文本内容"
          clearable
          type="textarea"
        />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmit">确 定</el-button>
      <el-button  @click="onCancel">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listData } from "@/api/system/dict/data";
import {
  saveTtsVoice,
  audioDownload,
} from "@/api/customerService/tts-test-list";
import mixins from "../common";
export default {
  mixins: [mixins],
  props: {
    // 角色编号
    addDialogShow: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    addDialogShow: {
      handler(val) {
        this.show = val;
        if (val) {
          this.getListType();
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      show: false,
      // 表单参数
      voiceTypeList: [],
      formData: {
        speedRatio: "", //语速
        volumeRatio: "", //音量
        pitchRatio: "", //音高
        chatText: "", //测试文本
        voiceType: "",
        content: "",
      },
      // 表单校验
      rules: {
        speedRatio: [
          {
            required: true,
            message: "语速不能为空，且只能输入数字，小数点保留一位",
            trigger: "blur",
          },
        ],
        volumeRatio: [
          {
            required: true,
            message: "音量不能为空，且只能输入数字，小数点保留一位",
            trigger: "blur",
          },
        ],
        pitchRatio: [
          {
            required: true,
            message: "音高不能为空，且只能输入数字，小数点保留一位",
            trigger: "blur",
          },
        ],
        chatText: [
          {
            required: true,
            message: "测试文本不能为空",
            trigger: "blur",
          },
        ],
        content: [
          {
            required: true,
            message: "录音名称内容不能为空",
            trigger: "blur",
          },
        ],
        voiceType: [
          { required: true, message: "请选择音色类型", trigger: "change" },
        ],
      },
    };
  },
  methods: {
    async getListType() {
      const { rows } = await listData({
        pageNum: 1,
        pageSize: 1000,
        dictType: "sys_voice_type",
      });
      this.voiceTypeList = rows || [];
    },
    // 保存
    onSubmit() {
        this.$refs["form"].validate(async (valid) => {
        if (valid) {
          const voiceAll = this.voiceTypeList.find(
            (el) => el.dictValue == this.formData.voiceType
          );
          let params = {
            ...this.formData,
            voiceName:voiceAll?.dictLabel || undefined, //音色
          };
          const { code } = await audioDownload(params);
          if (code === 200) {
            this.$message.success('操作成功！');
          }
        }
        this.onCancel()
      });
    },

    // 取消
    onCancel() {
      this.$emit("onClose");
    },
  },
};
</script>
